<!-- 登录注册 -->
<template>
  <div>
    <div class="container" >
      <h1 class="loginTitle">
        <a href="#/">Klaus 的博客</a>
      </h1>
      <!-- 登录注册 -->
      <div class="">
        <div  class="registerBox">
          <div class="lr-title">
            <h1>注册</h1>
            <p>
              已有账号<a href="#/Login" class="tcolors">登录</a>
            </p>
          </div>
          <el-form :model="tbUser" ref="tbUser" :rules="rules" style="margin-top: 40px">
            <el-form-item prop="username">
              <el-input v-model="tbUser.username"   placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input v-model="tbUser.email"  placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item  prop="password">
              <el-input type="password" placeholder="密码" v-model="tbUser.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  prop="confirmPassword">
              <el-input type="password" placeholder="确认密码"  v-model="tbUser.confirmPassword" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div v-if="canSave" class="lr-btn tcolors-bg" @click="newRegister">注册</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {addUser,getUserByUserName} from '../api/user'
  export default {
    name: 'Login',
    data() { //选项 / 数据
      let confirmPwdValidate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.tbUser.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      let checkUserName = (rule,value,callback) =>{
        getUserByUserName(value).then(response =>{
          if(response.data!==null){
            callback(new Error('用户名已经被注册'))
            this.canSave = false
          }else{
            this.canSave = true
            callback()
          }
        })
      };
      return {
        tbUser:{
            username:'',
            password:'',
            confirmPassword:'',
            phone:'',
            email:''
          },
        rules:{
          username: [
            { required: true, message: '请输入用户名', trigger: ['blur', 'change']  },
            { pattern: /^[A-Za-z0-9]{3,11}$/, message:'用户名只能是3 到 11 个字符的数字和字母的组合',trigger: ['blur', 'change']},
            { validator: checkUserName, trigger: ['blur', 'change'] }
          ],
          email: [
            {  required: true, message: '请输入邮箱', trigger: 'change' },
            {  type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'change' }
          ],
          confirmPassword: [
            { validator: confirmPwdValidate, trigger: 'blur' }
          ]
        },
        canSave: true,
        errorTip:''
      }
    },
    methods: { //事件处理器

      registerEnterFun: function(e){
        let keyCode = window.event? e.keyCode:e.which;
        if(keyCode == 13 ){
        }
      },
      newRegister:function(){//注册提交
        let that = this
        this.$refs['tbUser'].validate((valid) => {
            if (valid) {
              addUser(that.tbUser).then(response =>{
                that.$store.state.username = that.tbUser.username //填充到登录页面
                that.$store.state.password = that.tbUser.password
                that.$message.info("注册成功")
                that.$router.push("/Login")
              })
            } else {
              return false;
            }
          })
      },
      goLogin:function(){
        this.$router.push({path:'/Login'})
      }
    },
    created() { //生命周期函数

    }
  }
</script>

<style>
  /*登录注册标题*/
  .loginTitle{
    text-align: center;
    font-size: 26px;
    padding-top:50px;
    margin-bottom: 20px;
  }
  .loginBox ,.registerBox{
    background: #fff;
    padding:40px;
    max-width:320px;
    margin:0 auto;
  }
  .loginBox{
    padding-bottom:0;
  }
  .lr-title{
    position: relative;
    height:32px;
    line-height: 32px;
    margin-bottom: 20px;
  }
  .lr-title h1{
    font-size: 24px;
    color:#666;
    font-weight: bold;
    /*width:50%;*/
  }
  .lr-title p{
    font-size: 12px;
    color:#999;
    position: absolute;
    right:0;
    top:0;
  }
  .lr-btn{
    color:#fff;
    text-align: center;
    letter-spacing: 5px;
    padding:8px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 30px;
  }
  .loginBox .el-input,.registerBox .el-input{

  }
  .loginBox .el-alert ,.registerBox .el-alert{
    top:-18px;
    background-color: #888;
  }
  .loginBox .el-input input,.registerBox .el-input input{
    border-radius: 4px;
  }
  .loginBox h3,.registerBox h3{
    text-align: right;
    margin-bottom: 20px;
  }
  .loginBox h3 a,.registerBox h3 a{
    font-size: 13px;
    color:#999;
  }
  .loginBox .otherLogin{
    max-width:320px;
    padding:30px 40px;
    background: #ddd;
    text-align: center;
    margin-left:-40px;
    margin-right: -40px;
    visibility: hidden;
  }
  .loginBox .otherLogin p{
    margin-bottom:20px;
    font-size: 16px;
  }
  .loginBox .otherLogin a i{
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 18px;
    border-radius: 50%;
    color:#fff;
    margin: 0 10px;
  }
  .loginBox .otherLogin a i.fa-wechat{
    background: #7bc549;
  }
  .loginBox .otherLogin a i.fa-qq{
    background: #56b6e7;
  }
  .loginBox .otherLogin a i.fa-weibo{
    background: #ff763b;
  }
  /*登录成功*/
  .registerSuc{
    padding: 40px;
    margin: 0 auto;
  }
  .registerSuc .sucIcon{
    text-align: center;
    margin-bottom: 30px;
    padding-left:60px;
  }
  .registerSuc .sucContent{
    line-height: 1.5;
    font-size: 15px;
    text-align: center;
  }
  .registerSuc .sucContent p{
    margin-top: 10px;
    font-size: 13px;
    color: #999;
  }
  .registerSuc .sucContent .lastbtn{
    display: inline-block;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 5px;
    color:#fff;
    cursor: pointer;
  }
  .registerSuc .sucContent  .el-icon-close{
    fong-size: 13px;
  }
</style>
